<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="styles/bootstrap/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="styles/main.css">
    <link type="text/css" rel="stylesheet" href="js/DataTables-1.9.4/media/css/jquery.dataTables.css">
    <link rel="icon" href="favicon.ico">
    <title>BTC - Administraci&oacute;n</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/DataTables-1.9.4/media/js/jquery.dataTables.js" ></script>
    <script type="text/javascript" src="styles/bootstrap/js/bootstrap.js" ></script>
    <script type="text/javascript">

        $(function() {

            function hideAllHiddeable() {
                $(".hiddeable").hide();
            }

            $("#clasificacion").change(function() {
                var selected = $(this).find("option:selected").val();
                switch (selected) {
                    case "Pallet por muestras":
                        hideAllHiddeable();
                        $("#muestrasGroup").fadeIn();
                        $("#umbralPrimeraGroup").hide();
                        $("#umbralSegundaGroup").hide();
                        break;
                    case "Pallet por muestras y umbral":
                        hideAllHiddeable();
                        $("#muestrasGroup").fadeIn();
                        $("#umbralPrimeraGroup").fadeIn();
                        $("#umbralSegundaGroup").fadeIn();
                        break;
                    case "Pallet por extensión":
                        hideAllHiddeable();
                        break;
                }
            });
        })

    </script>
</head>
<body>
<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#">BTC</a>
        <ul class="nav">
            <li><s:a action="index">Dimensiones</s:a></li>
            <li><s:a action="stats">Estad&iacute;sticas</s:a></li>
            <li class="active"><a href="#">Generador</a></li>
        </ul>
    </div>
</div>
<div class="page-header">
    <h1>Generador <small>generador de pallets</small></h1>
</div>


<s:form action="savePallet" cssClass="form-horizontal" theme="simple">


    <div class="control-group">
        <label class="control-label" for="maquina">M&aacute;quina</label>
        <div class="controls">
            <s:select theme="simple"
                      list="maquinas"
                      listKey="id"
                      listValue="descripcion"
                      name="maquinaSeleccionada"
                      id="maquina" />
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="cantidad">Cantidad de bloques</label>
        <div class="controls">
            <s:textfield name="cantidad" id="cantidad"></s:textfield>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="alto">Alto</label>
        <div class="controls">
            <s:textfield name="dimension.alto" id="alto"></s:textfield>
            <div class="input-prepend">
                <span class="add-on">&Delta;</span>
                <s:textfield cssClass="input-mini" name="dimension.variacionAlto" id="valto"></s:textfield>
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="ancho">Ancho</label>
        <div class="controls">
            <s:textfield name="dimension.ancho" id="ancho"></s:textfield>
            <div class="input-prepend">
                <span class="add-on">&Delta;</span>
                <s:textfield cssClass="input-mini" name="dimension.variacionAncho" id="vancho"></s:textfield>
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="largo">Largo</label>
        <div class="controls">
            <s:textfield name="dimension.largo" id="largo"></s:textfield>
            <div class="input-prepend">
                <span class="add-on">&Delta;</span>
                <s:textfield cssClass="input-mini" name="dimension.variacionLargo" id="vlargo"></s:textfield>
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="maquina">Clasificaci&oacute;n</label>
        <div class="controls">
            <s:select theme="simple"
                      list="keys"
                      name="clasificacion"
                      id="clasificacion" />
        </div>
    </div>
    <div class="control-group hiddeable" style="display: none" id="muestrasGroup">
        <label class="control-label" for="muestras">Cantidad de muestras</label>
        <div class="controls">
            <s:textfield cssClass="input-mini" name="muestras" id="muestras"></s:textfield>
            <div class="input-prepend hiddeable" id="umbralPrimeraGroup">
                <span class="add-on">&thetasym; 1era</span>
                <s:textfield cssClass="input-mini" name="umbralPrimera" id="umbralPrimera"></s:textfield>
            </div>
            <div class="input-prepend hiddeable" id="umbralSegundaGroup">
                <span class="add-on">&thetasym; 2da</span>
                <s:textfield cssClass="input-mini" name="umbralSegunda" id="umbralSegunda"></s:textfield>
            </div>
        </div>
    </div>





    <div class="form-actions">
        <s:submit cssClass="btn btn-primary" value="Generar" theme="simple"/>
    </div>

</s:form>

</body>
</html>